<template>
	<view style="padding:0rem 1rem 1rem 1rem;">
		<view class="tab-title" >
			<view v-for="(title , index) in titleList" :key="index">
				<view :class="index==tabIndex?'border-bottom1':'border-bottom2'" @click="switchTab(index)">
					{{title.stateDesc}}
				</view>
			</view>
		</view>
		<view class="item" v-if="tabIndex ==0" @click="workLinesSelect">
			<view class="t-title">选择线体<i>*</i></view>
			<view class="content-select">
				<view class="v-select">{{fromData.factoryName?fromData.factoryName:"请选择"}}</view>
				<view class="iconfont icon-jiantou" style="margin-top: 8rpx;"></view>
			</view>
		</view>
		<view class="item" v-if="tabIndex ==0" @click="workProcedureSelect">
			<view class="t-title">班组<i>*</i></view>
			<view class="content-select">
				<view class="v-select">{{fromData.workProcedureName?fromData.workProcedureName:"请选择"}}</view>
				<view class="iconfont icon-jiantou" style="margin-top: 8rpx;"></view>
			</view>
		</view>
		<view class="item" v-if="tabIndex !=0" @click="workOfficeSelect">
			<view class="t-title">办公室<i>*</i></view>
			<view class="content-select">
				<view class="v-select">{{fromData.workProcedureName?fromData.workProcedureName:"请选择"}}</view>
				<view class="iconfont icon-jiantou" style="margin-top: 8rpx;"></view>
			</view>
		</view>
		<view class="item" @click="commuteTypeSelect">
			<view class="t-title">选择通勤方式<i>*</i></view>
			<view class="content-select">
				<view class="v-select">{{fromData.commuteType?fromData.commuteType:"请选择"}}</view>
				<view class="iconfont icon-jiantou" style="margin-top: 8rpx;"></view>
			</view>
		</view>
		<view class="item" style="border: none;">
			<view class="t-title">选择当前第几周<i>*</i></view>
		</view>
		<view class="item">
			<uni-icons type="back" size="20" @click="reduceSlider"></uni-icons>
			<slider @change="sliderChange" step="1" min="1" max="52" :value="weekData.weekNum" show-value
				style="flex: 1;" />
			<uni-icons type="forward" size="20" @click="addSlider"></uni-icons>
		</view>

		<view class="item-title">
			<view>时间范围(根据周次自动计算周一至周日时间)</view>
		</view>
		<uni-datetime-picker v-model="range" type="daterange" @maskClick="maskClick" />

		<view class="item-title">
			<view class="t-title">通勤时间内总里程（公里）<i>*</i></view>

		</view>
		<view class="item-title">
			<input class="item-content-select" style="height: 2rem;width: 80%;border-bottom: 0px;text-align: end;"
				placeholder="请输入里程" v-model="fromData.totalMile" type="number" />
			公里
		</view>
		<view class="item-title">
			<view class="t-title">{{days+'天'}}平均每天通勤里程</view>
			<view class="content-select" style="justify-content: right;align-items: center;">
				{{averageDistanceTraveled}}公里
			</view>
		</view>
		<view>
			<view class="t-title" style="margin:1rem 0px">其他改善建议</view>
			<textarea style="border: 0.4px solid #eee;width: 100%;padding: 0.8rem;" placeholder="请输入其他改善建议" v-model="fromData.otherAdvice">
			</textarea>
		</view>
		<view class="item-title" style="margin-top: 4rem;">
			<button style="width: 80%;" type="primary" @click="doAdd">提交</button>
		</view>
	</view>

</template>

<script>
	import processImprovementApi from "@/pages_cer/api/process-improvement/process-improvement.js"
	import commonConstants from "@/common/constants/commonConstants.js"
	import dataCom from "@/pages_cer/components/data_comment.js"
	import dateUtil from "@/pages_cer/components/date_utils.js"
	let that;
	export default {
		data() {
			return {
				fromData: {
					factoryName: '',
					factoryCode: "",
					workProcedureName: "",
					workProcedureCode: "",
					commuteType: '',
					startTime: '',
					endTime: '',
					totalMile: '', //时间范围内通勤总里程
					otherAdvice: ''
				},
				titleList: [{
						stateValue: "0",
						stateDesc: "生产人员"
					},
					{
						stateValue: "1",
						stateDesc: "办公人员"
					}
				],
				factoryList: [],
				tabIndex: 0,
				weekData: {},
				range: [],
				averageDistanceTraveled: '0',
				days: ''
			}
		},
		watch: {
			'fromData.totalMile': {
				handler: function(val) {
					if (val) {
						this.days = Math.ceil((new Date(this.range[1]).getTime() - new Date(this.range[0]).getTime()) /
							(1000 * 60 * 60 * 24))+1

						this.averageDistanceTraveled = Math.round((val / this.days) * 100) / 100
						
						// this.averageDistanceTraveled =
					}

				},
				deep: true
			}
		},
		methods: {
			/**
			 * 选择办公室
			 */
			workOfficeSelect(){
				this.navigateToSelect({
					url: commonConstants.request.context.path.cer +
						'/cer/officeData/getComboList',
					param: {
					
					},
					isPager: false,
				}, (item) => {
					console.log(item,"0000000======");
					this.fromData.factoryName = "寰宇青岛"
					this.fromData.factoryCode= "DFQT"
					this.fromData.workProcedureName =item.value
					this.fromData.workProcedureCode =item.value
				})
			},
			reduceSlider() {
				if (this.weekData.weekNum > 1) {
					this.weekData.weekNum = this.weekData.weekNum - 1
					this.setDateForCurrentWeek(this.weekData.weekNum)
				} else {
					uni.showToast({
						icon: 'fail',
						title: '不能再小了'
					})
				}
			},
			addSlider() {
				if (this.weekData.weekNum < 52) {
					this.weekData.weekNum = this.weekData.weekNum + 1
					this.setDateForCurrentWeek(this.weekData.weekNum)
				} else {
					uni.showToast({
						icon: 'fail',
						title: '不能再大了'
					})
				}
			},
			sliderChange(e) {
				console.log(e);
				this.weekData.weekNum = e.detail.value
				this.setDateForCurrentWeek(e.detail.value)
			},
			setDateForCurrentWeek(value) {
				this.range = dateUtil.getDateForCurrentWeek(value)
				this.weekData.startDate = this.range[0]
				this.weekData.endDate = this.range[1]
			},
			maskClick(e) {
				console.log(e);
			},

			switchTab(index) {
				this.tabIndex = index
				
				this.fromData.factoryCode=''
				this.fromData.factoryName=''
				this.fromData.workProcedureCode=''
				this.fromData.workProcedureName=''
			},
			/**
			 * 提交
			 */
			doAdd() {
				
				if(this.tabIndex == 0){
					if(!this.fromData.factoryName){
						uni.showModal({
							title:'温馨提示',
							content:'请选择线体',
							showCancel:false
						})
						return
					}
					if(!this.fromData.workProcedureName){
						uni.showModal({
							title:'温馨提示',
							content:'请选择班组',
							showCancel:false
						})
						return
					}
					
				}else{
					if(!this.fromData.workProcedureName){
						uni.showModal({
							title:'温馨提示',
							content:'请选择办公室',
							showCancel:false
						})
						return
					}
				}
				//commuteType
				if(!this.fromData.commuteType){
					uni.showModal({
						title:'温馨提示',
						content:'请选择通勤方式',
						showCancel:false
					})
					return
				}
				if(!this.fromData.totalMile){
					uni.showModal({
						title:'温馨提示',
						content:'请输入通勤里程',
						showCancel:false
					})
					return
				}
				
				
				this.fromData.startTime = new Date(this.range[0]).getTime()
				this.fromData.endTime = new Date(this.range[1]).getTime()
				processImprovementApi.insertStaffImpro(this.fromData,(res)=>{
					uni.showToast({
						icon:'success',
						title:'提交成功'
					})
					
				})
			},

			/**
			 * 选择通勤方式
			 */
			commuteTypeSelect() {
				this.navigateToSelect({
					url: commonConstants.request.context.path.cer +
						'/cer/typeGroup/getTypeGroupComboByGroup/出行',
					param: {
					
					},
					isPager: false,
				}, (item) => {
					this.fromData.commuteType = item.name
				})
			},

			/**
			 * 选择线体
			 */
			workLinesSelect() {
				let arry = []
				this.factoryList.forEach(item => {
					arry.push(item.name)
				})
				uni.showActionSheet({
					itemList: arry,
					success: (i) => {
						this.fromData.factoryName = this.factoryList[i.tapIndex].name
						this.fromData.factoryCode = this.factoryList[i.tapIndex].value
					}
				})
			},
			/**
			 * 获取 工厂列表（线体）
			 */
			getFactoryComboList() {
				processImprovementApi.getFactoryComboList((res) => {
					if (res.hasData) {
						that.factoryList = res.list
					} else {
						uni.showToast({
							title: "获取配置线体为空，请检查后台配置"
						})
					}
				})
			},
			/**
			 * 选择班组
			 */
			workProcedureSelect() {

				let that = this
				
				// this.navigateToSelectMultiple({
				// 	url: commonConstants.request.context.path.cer +
				// 		'/basedata/definedDepartment/getComboList',
				// 	param: {
				// 		"modelType": 50,
				// 		'parentCode':that.fromData.factoryCode
				// 	},
				// 	isPager: false,
				// }, (item) => {
				// 	this.fromData.workProcedureName = item.name
				// 	this.fromData.workProcedureCode = item.value
				// })
				this.navigateToSelect({
					url: commonConstants.request.context.path.cer +
						'/basedata/definedDepartment/getComboList',
					param: {
						"modelType": 50,
						'parentCode':that.fromData.factoryCode
					},
					isPager: false,
				}, (item) => {
					this.fromData.workProcedureName = item.name
					this.fromData.workProcedureCode = item.value
				})
			},
			navigateToSelect(data, collback) {
				let str=''
				
				if(data.isPager !='undefined'){
					str = str+'&ip=' + data.isPager
				}
				if(data.param){
					str = str+'&pa=' +JSON.stringify(data.param)
				}
				if( data.fuzzyList &&  data.fuzzyList.length >0){
					str = str+'&fz=' + data.fuzzyList
				}
				uni.navigateTo({
					url: '/pages/index/lxsh-select-list?ul=' + data.url + str,
					events: {
						getSelect: function(data) {
							if (collback) {
								collback(data)
							}
						}
					},
				})
			},
		},
		onLoad() {
			that = this
			this.weekData = dateUtil.getCurrentWeek()
			if (this.weekData) {

				this.range[0] = this.weekData.startDate
				this.range[1] = this.weekData.endDate
			}
			this.getFactoryComboList()
		}
	}
</script>

<style>
	@import url('../../style/item.css');
	@import url("/pages_psm/model/permit-to-work/common-style.css");
</style>